package com.pj.compose.ui.page.other

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Switch
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.pj.compose.darkThemeState
import com.pj.compose.themeTypeState
import com.pj.compose.ui.compose.AppTopBarColumn
import com.pj.compose.ui.theme.ThemeType

@Composable
fun ChangeThemePage(navHostController: NavController) {
    AppTopBarColumn(
        title = "ChangeTheme",
//            modifier = Modifier.padding(it),
        backClick = { navHostController.popBackStack() }) {
        ChangeThemeIndex()
    }
}


@Composable
fun ChangeThemeIndex() {
    Column(Modifier.padding(15.dp),verticalArrangement = Arrangement.spacedBy(15.dp)) {
//        Spacer(modifier = Modifier.height(20.dp))
//        Divider()
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(text = "暗黑模式", fontSize = 16.sp, color = MaterialTheme.colors.onSurface)
            Switch(checked = darkThemeState.value, onCheckedChange = {
                darkThemeState.value = it
            })
        }
//        Divider()

        RadioButton(themeTypeState.value == ThemeType.Default, "默认") {
            themeTypeState.value = ThemeType.Default
        }
        RadioButton(themeTypeState.value == ThemeType.Theme1, "主题1") {
            themeTypeState.value = ThemeType.Theme1
        }
        RadioButton(themeTypeState.value == ThemeType.Theme2, "主题2") {
            themeTypeState.value = ThemeType.Theme2
        }
        RadioButton(themeTypeState.value == ThemeType.Theme3, "主题3") {
            themeTypeState.value = ThemeType.Theme3
        }
        RadioButton(themeTypeState.value == ThemeType.Theme4, "主题4") {
            themeTypeState.value = ThemeType.Theme4
        }
        RadioButton(themeTypeState.value == ThemeType.Theme5, "主题5") {
            themeTypeState.value = ThemeType.Theme5
        }
    }
}


@Composable
fun RadioButton(isSelected: Boolean, text: String, onClick: () -> Unit) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp)
            .clickable { onClick() }, verticalAlignment = Alignment.CenterVertically
    ) {
        androidx.compose.material.RadioButton(
            selected = isSelected,
            modifier = Modifier.size(30.dp),
            onClick = onClick
        )
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.CenterStart) {
            Text(text = text, color = MaterialTheme.colors.onSurface)
        }
    }
}
